<template>
	<view class="content">
		<u-navbar bgColor="transparent" titleStyle="color:#fff" title="订单列表" left-icon-color="#fff" :autoBack="true"
			:placeholder="true">
		</u-navbar>
		<u-tabs :list="tabslist" @click="tabsclick" :current="current" :inactiveStyle="{ color: '#bcc0c6' }"
			lineColor="#98F083" :activeStyle="{ color: '#98F083' }"></u-tabs>
		<view v-if="list.length > 0">
			<view class="info" v-for="(item,index) in list" :key="index">
				<view class="info-head">
					<view class="head-left">
						<image :src="item.goods_logo" mode=""></image>
						<view>
							{{item.goods_name}}
						</view>
					</view>
					<view class="info-btn" v-if="item.order_status == 2">
						<u-button type="primary" style="color: #000; height: 60rpx;"
							color="linear-gradient( 90deg, #C8F673 0%, #98F083 100%)" @click="gobuy(item)"
							text="确定收货"></u-button>
					</view>
				</view>
				<view class="info-num">
					<view class="num">
						{{item.goods_num}}
					</view>
					<view class="price">
						<text>{{item.type}}</text>
					</view>
				</view>
				<view class="info-text">
					<view>
						数量
					</view>
					<view>
						状态
					</view>
				</view>
			</view>
		</view>

		<view v-else>
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" :marginTop="100" text="订单列表为空">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabslist: [{
					name: '待付款',
				}, {
					name: '待发货',
				}, {
					name: '已发货',
				}, {
					name: '已完成',
				}, {
					name: '已取消',
				}],
				current: 0,
				list: [],
				page: 1
			}
		},
		onLoad(e) {
			this.current = Number(e.cutt)
			this.postlist()
		},
		onReachBottom() {
			this.page = this.page + 1
			this.postlist()
		},
		methods: {
			gobuy(item) {
				const app = this
				uni.showModal({
					title: '提示',
					content: '是否确定收货！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let params = {
								id: item.id
							}
							uni.showLoading({
								mask:true
							})
							app.$Request({
								method: 'POST',
								url: '/api/shop/orderComplete',
								data: params
							}).then(res => { 
								uni.hideLoading()
								if (res.code == 1) {
									uni.showToast({
										title: '收货成功！',
										icon: 'none'
									})
									app.postlist()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			postlist() {
				let params = {
					type: this.current,
					page: this.page
				}
				this.$Request({
					method: 'POST',
					url: '/api/shop/orderList',
					data: params
				}).then(res => {
					if (res.code == 1) {
						if (this.page == 1) {
							this.list = res.data.list
						} else {
							this.list = [...this.list, ...res.data.list]
						}

					}
				})
			},
			tabsclick(e) {
				console.log(e)
				this.current = e.index
				this.page = 1
				this.list = []
				this.postlist()
			}
		}
	}
</script>

<style>
	page {
		background-color: #17191A;
	}
</style>
<style scoped lang="scss">
	.content {
		min-height: 100vh;
		background-image: url('/static/my/my-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 568rpx;
		padding: 0 30rpx;

		.info {
			padding: 30rpx;
			margin-bottom: 30rpx;
			background: linear-gradient(134deg, rgba(255, 227, 211, 0.06) 0%, rgba(67, 130, 84, 0.26) 100%);
			border: 4rpx solid rgba(108, 233, 137, 0.12);
			border-radius: 30rpx;
			margin-top: 20rpx;

			.info-head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #fff;

				.head-left {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 600;

					image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}
				}

				.info-btn {
					width: 160rpx;
				}
			}

			.info-num {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				.num {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #A1FFA9;
					font-size: 30rpx;
					font-weight: 600;
				}

				.price {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					color: #A1FFA9;

					text {
						font-weight: 600;
						font-size: 30rpx;
					}
				}
			}

			.info-text {
				display: flex;
				justify-content: space-between;
				color: #999;
				font-size: 24rpx;
				margin-top: 10rpx;

				view {
					width: 50%;
					text-align: center;
				}
			}
		}
	}
</style>